{% extends 'base.html' %}
{% block title %}
    <title>购物车</title>
{% endblock %}
{% block container %}
    <form method="post" action=".">
        <!--主体-->
        <header class="wy-header">
            <div class="wy-header-icon-back"><span></span></div>
            <div class="wy-header-title">购物车</div>
        </header>
        <div class="weui-content">
            {% for item in prod_list %}
                {% with product=item.product %}
                    <div class="weui-panel weui-panel_access">
                        <div class="weui-panel__hd">
                  <span>官方自营</span
                  ><a href="javascript:;" class="wy-dele"></a>
                        </div>
                        <div class="weui-panel__bd">
                            <div class="weui-media-box_appmsg pd-10">
                                <div class="weui-media-box__hd check-w weui-cells_checkbox">
                                    <label class="weui-check__label" for="cart-pto1">
                                        <div class="weui-cell__hd cat-check">
                                            <input
                                                    type="checkbox"
                                                    class="weui-check"
                                                    name="cartpro"
                                                    id="cart-pto1"
                                            /><i class="weui-icon-checked"></i>
                                        </div>
                                    </label>
                                </div>
                                <div class="weui-media-box__hd">
                                    <a href="{% url 'mall:product_detail' product.uid %}"
                                    ><img class="weui-media-box__thumb" src="{{ item.img.url }}" alt="{{ item.name }}"
                                    /></a>
                                </div>
                                <div class="weui-media-box__bd">
                                    <h1 class="weui-media-box__desc">
                                        <a href="{% url 'mall:product_detail' product.uid %}" class="ord-pro-link">{{ item.name }}</a>
                                    </h1>
                                    <p class="weui-media-box__desc">
                                        规格：<span>红色</span>，<span>23</span>
                                    </p>
                                    <div class="clear mg-t-10">
                                        <div class="wy-pro-pri fl">
                                            ¥<em class="num font-15">{{ item.price }}</em>
                                        </div>
                                        <div class="pro-amount fr"><div class="Spinner" data-value="{{ item.count }}"></div></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endwith %}
            {% endfor %}
        </div>
        <!--底部导航-->
        <div class="foot-black"></div>
        <div class="weui-tabbar wy-foot-menu">
            <div class="npd cart-foot-check-item weui-cells_checkbox allselect">
                <label class="weui-cell allsec-well weui-check__label" for="all">
                    <div class="weui-cell__hd">
                        <input type="checkbox" class="weui-check" name="all-sec" id="all" />
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p class="font-14">全选</p>
                    </div>
                </label>
            </div>
            <div class="weui-tabbar__item  npd">
                <p class="cart-total-txt">
                    合计：<i>￥</i>
                    {% if cart_total is not None %}
                        <em class="num font-16" id="zong1">{{ cart_total.sum_amount }}</em>
                    {% else %}
                        <em class="num font-16" id="zong1">0</em>
                    {% endif %}
                </p>
            </div>
            <button type="submit" class="red-color npd w-90 t-c">
                <p class="promotion-foot-menu-label">去结算</p>
            </button>
        </div>
    </form>

{% endblock %}

{% block footer %}
    <script type="text/javascript" src="/static/js/jquery.Spinner.js"></script>
    <script type="text/javascript">
        $(function() {
            let value = $('.Spinner').attr('data-value')
            $('.Spinner').Spinner({ value: value, len: 3, max: 999 });
        });
    </script>
    <!---全选按钮-->
    <script type="text/javascript">
        $(document).ready(function() {
            $('.allselect').click(function() {
                if (
                    $(this)
                        .find('input[name=all-sec]')
                        .prop('checked')
                ) {
                    $('input[name=cartpro]').each(function() {
                        $(this).prop('checked', true);
                    });
                } else {
                    $('input[name=cartpro]').each(function() {
                        if ($(this).prop('checked')) {
                            $(this).prop('checked', false);
                        } else {
                            $(this).prop('checked', true);
                        }
                    });
                }
            });
        });
    </script>
    <script>
        $(document).on('click', '.wy-dele', function() {
            $.confirm(
                '您确定要把此商品从购物车删除吗?',
                '确认删除?',
                function() {
                    $.toast('文件已经删除!');
                },
                function() {
                    //取消操作
                }
            );
        });
    </script>
{% endblock %}

